<template>
  <a-card :bordered="false" class="card-area">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="12">
            <a-form-item label="创建时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-date
                v-model="queryParam.createTime_begin"
                :showTime="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                style="width:45%"
                placeholder="请选择开始时间"
              ></j-date>
              <span style="width: 10px;">~</span>
              <j-date
                v-model="queryParam.createTime_end"
                :showTime="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                style="width:45%"
                placeholder="请选择结束时间"
              ></j-date>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-top: 5px">
      <!--      <a-button @click="handleAdd" type="primary" icon="plus">启动新流程</a-button>-->
      <a-button @click="addTask" type="primary" icon="plus">新建任务</a-button>
      <a-button  type="primary" icon="plus">
        <router-link :to="{ path: path }" >进度督促</router-link>
      </a-button>

<!--      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>-->
    </div>

    <!-- table区域-begin -->
<!--
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
-->

      <a-table
        class="atable"
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >
       <span slot="action" slot-scope="text, record">
         <a class="a" @click="handleView(record)">
           <img class="src" src="../../img/jindu.png" title="任务详情"></a>
               <a @click="findShinePics2(record)" v-if="record.status == 1">
            <img class="src" src="../../img/chaliucheng.png" title="任务进度查询"></a>

          <a @click="handleEdit(record)" v-if="record.status !== 1">
            <img class="src" src="../../img/xiugai1.png" title="修改"></a>
              <a @click="flowPlan(record)" v-if="record.status !== 1">
                <img class="src" src="../../img/guihua1.png" title="流程规划"></a>
                 <a @click="taskAssignment(record)" v-if="record.status !== 1">
                   <img class="src" src="../../img/fenpei1.png" title="任务分配"></a>
              <a @click="taskShow(record)" v-if="record.status == 1">
                   <img class="src" src="../../img/chakan.png" title="分配查看"></a>
                 <a @click="taskStart(record)" v-if="record.status !== 1">
                   <img class="src" src="../../img/qidong.png" title="任务启动"></a>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                 <a v-if="record.status !== 1" title="删除"><img class="src" src="../../img/shanchu.png"></a>
               </a-popconfirm>
        <!--    <a class="ant-dropdown-link">
              {{"更多"}} <a-icon type="down"/>
            </a>-->
        </span>
      </a-table>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <process-modal ref="modalForm" @ok="modalFormOk"></process-modal>
    <process-view ref="modalView"></process-view>
    <flow-plan ref="flowPlan"></flow-plan>
    <model-deploy-modal ref="deployModal" @deployModel="delopyModel"/>
    <add-task ref="addTaskModal" @ok="loadData"/>
    <update-task ref="updateTaskModal" @ok="loadData"></update-task>
    <add-task ref="modalForm" @ok="modalFormOk"></add-task>
    <check-modal ref="checkModal" @deployModel="delopyModel"/>
    <flow-show-visible2 ref="flowShowVisible2"></flow-show-visible2>
  </a-card>
</template>

<script>
  import ProcessModal from './modules/ActivitiProcessModal'
  import ProcessView from './modules/ActivitiProcessView'
  import {JantdListMixin} from '@/mixins/JantdListMixin'
  import JDate from '@/components/jantd/JDate'
  import {deployModel, allDeployedModel, taskStart} from '@/api/activiti'
  import AddTask from './modules/AddTask'
  import UpdateTask from './modules/UpdateTask'
  import FlowPlan from './modules/FlowPlan'
  import ModelDeployModal from './modules/ActivitiModelDeployModal'
  import store from '@/store/'
  import CheckModal from './modules/CheckModal'
  import FlowShowVisible2 from "./modules/FlowShowVisible2"

  const statusText = ['草稿', '处理中', '结束', '废弃']

  export default {
    name: 'ProcessList',
    mixins: [JantdListMixin],
    components: {
      ProcessModal,
      ProcessView,
      JDate,
      FlowPlan,
      ModelDeployModal,
      AddTask,
      UpdateTask,
      CheckModal,
      FlowShowVisible2
    },
    data() {
      return {
        description: '流程管理页面',
        // 查询条件
        queryParam: {name: ''},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '任务名称',
            align: 'center',
            dataIndex: 'modelName'
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'beginTime'
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime'
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
            sorter: true
          },
          {
            title: '任务描述',
            dataIndex: 'remark',
            align: 'center',
            sorter: true
          },
          {
            title: '任务进度',
            dataIndex: 'taskName',
            align: 'center',
            sorter: true
          },
          {
            title: '状态',
            dataIndex: 'status',
            customRender(v, r, i) {
              return statusText[v]
            },
            align: 'center',
            sorter: true
          },
          {
            title: '牵头单位',
            dataIndex: 'department',
            align: 'center',
            sorter: true
          },
          /*   {
               title: '参与单位',
               dataIndex: 'departments',
               align: 'center',
               sorter: true
             },*/
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: {customRender: 'action'}
          }
        ],
        url: {
          list: '/act/process/list',
          delete: '/act/model/delete',
           delete: '/act/task/delete'
        },
        path: '/isystem/annountCement',
        deployedList: [],
        model: {},
        process: {},
        taskStartHide: false
      }
    },
    computed: {},
    methods: {
      handleDeploy: function (modelId) {
        const that = this
        deployModel(modelId).then(res => {
          if (res.success) {
            that.$message.success(res.message)
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      onChangeDate(date, dateString) {
        console.log(date, dateString)
      },
      handleView(process) {
        this.$refs.modalView.show(process)
      },
      updateTask(process) {
        this.$refs.updateTaskModal.show(process)
      },
      flowPlan(process) {
        this.$refs.flowPlan.add(process)
      },
      taskAssignment(process) {
        this.model = Object.assign({}, this.deployedList.filter(e => e.id === process.modelId)[0])
        this.$refs.deployModal.show(this.model)
      },
      taskShow(process) {
        this.model = Object.assign({}, this.deployedList.filter(e => e.id === process.modelId)[0])
        this.$refs.checkModal.show2(this.model)
      },
      fetchDeployedModel() {
        const that = this
        allDeployedModel().then(res => {
          if (res.success) {
            that.deployedList = [].concat(res.result)
          }
        })
      },
      taskStart(process) {
        console.log(this.dataSource)

        const that = this
        let formData = Object.assign({}, process, that.process)
        taskStart(formData).then(
          res => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.loadData();
              // store.commit('SETTASKSTARTHIDE', true);
              // that.taskStartHide = that.$store.state.bpmn.taskStartHide
              console.log(that.taskStartHide)
            } else {
              that.$message.warning(res.message)
            }
          }
        )
      },
      addTask() {
        this.$refs.addTaskModal.show()
      },
      //跳转查看全部流程图
      findShinePics2(record) {
        console.log(record)
        this.$refs.flowShowVisible2.show2(record)
      },
      deleteTask(id) {
        deleteTask(id)
          .then(function (res) {
            console.log(res)
          }).catch(function (err) {
          console.log(err)
        })
      },
      delopyModel(definition) {
        this.process.modelName = definition.name
        this.process.modelKey = definition.key
        this.process.processDefinitionId = definition.id
        this.visible = true
      }
    },
    created() {
      this.fetchDeployedModel()
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

/*  .card-area {
    padding: 24px;
    zoom: 1;
    background-image: url("../../img/biaokuang.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }*/


</style>
